<template>
  <div v-if="data" class="info-workload padbottom">
    <div class="info-assess">
      <div class="info-assess-item">
        <div class="title">预计IT投入</div>
        <div class="desc">
          <span class="num">{{
            parseFloat(data.amount.estimate_it_amount)
          }}</span
          >万元
        </div>
      </div>
      <div class="info-assess-item">
        <div class="title">立项金额</div>
        <div class="desc">
          <span class="num">{{
            parseFloat(data.amount.project_total_amount)
          }}</span
          >万元
        </div>
      </div>
    </div>
    <!-- <div class="info-title">
      <div class="title">工作量评估</div>
      <img src="@/assets/svg/xinjian.svg" class="add" @click="handleAdd"/>
    </div> -->
    <van-checkbox-group v-model="result">
      <van-swipe-cell
        v-for="(item, index) in data.assess"
        class="info-content"
        :key="index"
      >
        <div>
          <div @click="workloadDetail(item.id)" class="intro">
            <p class="title">{{ item.plate_name }}</p>
            <p class="desc">{{ item.system_name }}</p>
            <img
              class="add"
              v-if="isAssessmentNode && item.is_mine == 1"
              @click.stop="addworkload(item.id)"
              src="@/assets/svg/xinjian_list.svg"
              alt=""
            />
          </div>
          <van-cell class="name">
            <p>系统负责人：{{ item.leader_name }}</p>
            <!-- <van-checkbox
              shape="square"
              icon-size="14px"
              checked-color="#009966"
              :name="item.id"
              ><p>系统负责人：{{ item.leader_name }}</p></van-checkbox
            > -->
          </van-cell>
        </div>
        <template v-if="isAssessmentNode && item.is_mine == 1" #right>
          <van-button
            @click="delList(item.id)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <div v-if="isCurrentNode" class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
import { workAssess, workAssessDel } from "@/api/service.js";
import { Toast } from "vant";
export default {
  props: ["id", "currentNode"], //服务单id
  data() {
    return {
      data: "",
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      isCheck: false,
      isCurrentNode: true,
      isAssessmentNode: true, //是否是评估节点
      result: [],
    };
  },
  mounted() {
    console.log(this.currentNode);
    if (this.id) {
      this.getData();
      this.checkNode();
    }
    if (localStorage.getItem("infoData")) {
      localStorage.removeItem("infoData");
    }
  },
  watch: {
    id(newVal) {
      console.log(newVal);
      this.getData();
    },
  },
  methods: {
    handleAdd() {
      this.$router.push("/service/expected");
    },
    getData() {
      workAssess({
        server_id: this.id, //服务单id
        node_id: this.currentNode,
      }).then((res) => {
        console.log(res);
        if (res.status == "success") {
          this.data = res.data;
        }
      });
    },
    //检查是否是当前节点
    checkNode() {
      if (
        this.currentNode == "T10015" ||
        this.currentNode == "T10067" ||
        this.currentNode == "T10082"
      ) {
        this.isCurrentNode = true;
      } else {
        this.isCurrentNode = false;
      }
      if (this.currentNode == "T10015") {
        this.isAssessmentNode = true;
      } else {
        this.isAssessmentNode = false;
      }
    },
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    submit() {
      console.log(this.result);
      for (let i = 0; i < this.data.assess.length; i++) {
        if (
          this.data.assess[i].assessed == 0 &&
          this.data.assess[i].is_mine == 1
        ) {
          Toast("工作量未评估完成");
          return;
        }
      }
      this.$router.push({
        path: "/service/node-flow",
        query: {
          id: this.id,
          showUser: true,
          isAssessmentNode: this.isAssessmentNode ? 1 : 0,
          source: this.currentNode,
        },
      });
    },
    //删除工作量评估单
    delList(id) {
      workAssessDel({
        assess_id: id,
        server_id: this.id,
        node_id: this.currentNode,
      }).then((res) => {
        console.log(res);
        if (res.status == "success") {
          for (var i = 0; i < this.data.assess.length; i++) {
            if (this.data.assess[i].id == id) {
              this.data.assess.splice(i, 1);
            }
          }
          console.log(this.data.assess);
        }
        Toast(res.message);
      });
    },
    workloadDetail(id) {
      this.$router.push({
        path: "/service/workload",
        query: {
          server_id: this.id, //服务单id
          id: id, //工作量评估列表id
          isAdd: false,
          isAssessmentNode: this.isAssessmentNode ? 1 : 0,
        },
      });
    },

    addworkload(id) {
      this.$router.push({
        path: "/service/workload",
        query: {
          server_id: this.id, //服务单id
          id: id, //工作量评估列表id
          isAdd: true,
          isAssessmentNode: this.isAssessmentNode ? 1 : 0,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.info-workload {
  &.padbottom {
    padding-bottom: 100px;
  }
  .info-assess {
    display: flex;
    background: #fff;
    padding: 15px 0;
    margin-bottom: 10px;
    .info-assess-item {
      flex: 1;
      padding: 0 15px;
      &:last-child {
        border-left: 1px solid #f1f1f1;
      }
    }
    .title {
      font-size: 12px;
      color: #313541;
    }
    .desc {
      margin-top: 5px;
      font-size: 12px;
      color: #009966;
    }
    .num {
      font-size: 24px;
      font-weight: bold;
    }
  }
  // info-title
  .info-title {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 53px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #011445;
    }
    .add {
      width: 21px;
    }
    .text-add {
      font-size: 14px;
      color: #009966;
    }
  }

  // info-content
  .info-content {
    background: #fff;
    margin-bottom: 10px;
    .intro {
      height: 62px;
      padding: 15px 0 0;
      margin: 0 15px;
      border-bottom: 1px solid #f2f2f2;
      position: relative;
      .add {
        position: absolute;
        top: 20px;
        right: 0;
        width: 30px;
        height: 30px;
        z-index: 999;
        border-radius: 50%;
        background: #009966;
      }
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #313541;
        margin: 0;
      }
      .desc {
        font-size: 12px;
        color: #313541;
        margin-top: 6px;
        margin-bottom: 0;
      }
    }
    .van-button--danger {
      border-color: #fa5151;
      background: #fa5151;
    }
    .van-button {
      height: 100%;
    }
    .name {
      padding: 0 15px;
      // height: 30px;
      // line-height: 30px;
      font-size: 12px;
      color: #011445;
    }
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: rgba(147, 157, 173, 0.18);
      color: #313541;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
</style>